
{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="{% static 'login/image/222.png' %}">

    <title>登录</title>

    <!-- Bootstrap core CSS -->  
    <!-- Bootstrap 核心CSS文件 -->
    <link href="{% static 'login/css/bootstrap.min.css' %}" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="signin.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="../../assets/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
        /*body{
          background: url("{% static 'login/image/121.jpg' %}")  no-repeat;
        }*/
        body{
    background: url("{% static 'login/image/6786.jpg' %}");
    background-size: cover;
    /*animation-name:myfirst;*/
    animation-duration:12s;
    /*变换时间*/
    animation-delay:2s;
    /*动画开始时间*/
    animation-iteration-count:infinite;
    /*下一周期循环播放*/
    animation-play-state:running;
    /*动画开始运行*/
}
@keyframes myfirst
{
    0%   {background:url("{% static 'login/image/121.jpg' %}");}
    34%  {background:url("{% static 'login/image/1212121.jpg' %}");}
    67%  {background:url("{% static 'login/image/121.png' %}");}
    100% {background:url("{% static 'login/image/1212121.jpg' %}");}
}
        /*.form-signin{background: rgba(255,255,255,0);width:320px;margin:120px auto;}*/
        /*阴影*/
        .fa{display: inline-block;top: 27px;left: 6px;position: relative;color: #ccc;}
        input[type="text"],input[type="password"]{padding-left:26px;}
        #checkbox{padding-left:21px;}
        
        .form-signin-heading{
            text-align: center;
            color: #337ab7;
        }
        h3{
            display: inline-block;    
            margin:120px auto 0;
        }
        .the_title{
            margin-top: 30px;
            background: rgba(255,255,255,0.7);
        }
        .tabbable{
            margin: 120px auto 0;
            background: rgba(255,255,255,0.9);
        }
        .footer{
            background: rgba(255,255,255,0.8);
            position: fixed;
            left: 460px;
            bottom: 6px;
        }
        .footer .foot{
            margin: 0 auto;
        }
    </style>
  </head>

  <body>

    <div class="container">
      <div class="row">
        <div class="col-md-4">
          
        </div>
        <div class="col-md-4 login_box">
          
        <h2 class="form-signin-heading the_title">北京网络职业学院考试系统</h2>
        
        <!-- <h3 class="form-signin-heading">请选择</h3> -->

        <div class="tabbable" id="tabs-142713">
            <!-- Only required for left/right tabs -->
            <ul class="nav nav-tabs">
                <li class="active">
                    <a href="#panel-71949" data-toggle="tab" contenteditable="false" class="glyphicon glyphicon-education">学生登录</a>
                </li>
                <li class="">
                    <a href="#panel-486460" data-toggle="tab" contenteditable="false" class="glyphicon glyphicon-user">老师登录</a>
                </li>
                <li class="">
                    <a href="#panel-666" data-toggle="tab" contenteditable="false" class="glyphicon glyphicon-check">教务登录</a>
                </li>
            </ul>
            <div class="tab-content">
                <!-- 学生登录界面 -->
                <div class="tab-pane active" id="panel-71949">
                    <form class="form-signin" action="{% url 'login:student_login' %}" method="post">
                        {% csrf_token %}
                    <i class="fa fa-user fa-lg"></i>
                    <label for="inputName" class="sr-only">账号：</label>
                    <input type="text" name="student_name" id="inputName" class="form-control" placeholder="学生姓名" required autofocus>

                    <i class="fa fa-lock fa-lg"></i>
                    <label for="inputPassword" class="sr-only">密码：</label>
                    <input type="password" name="password" id="inputPassword" class="form-control" placeholder="密码" required>

                    <label for="inputClass" class="sr-only">身份：</label>
                    <input type="text" name="status" id="inputClass" class="form-control" value="学生" required style="display: none;">
                    <div class="checkbox">
                        <label>
                        <input type="checkbox" value="remember-me"> 记住我
                        </label>
                        <a href="{% url 'login:alter_pswd' %}">修改密码</a>
                        <a href="{% url 'login:register' %}">注册账号</a>
                        {% if message %}
                        <h5 style="color: red;">{{message}}</h5>
                        {% endif %}
                    </div>
                    <a href="{% url 'face:login' %}"><button type="button" class="btn btn-primary btn-lg btn-block">刷脸登陆</button></a>
                    
                    <button class="btn btn-lg btn-primary btn-block" type="submit">登陆</button>
                </form>

                </div>
                <!-- 老师登录界面 -->
                <div class="tab-pane" id="panel-486460">
                    <form class="form-signin" action="{% url 'login:teacher_login' %}" method="post">
                        {% csrf_token %}
                    <i class="fa fa-user fa-lg"></i>
                    <label for="inputName" class="sr-only">账号：</label>
                    <input type="text" name="teacher_name" id="inputName" class="form-control" placeholder="老师工号" required autofocus>
                    <i class="fa fa-lock fa-lg"></i>
                    <label for="inputPassword" class="sr-only">密码：</label>
                    <input type="password" name="password" id="inputPassword" class="form-control" placeholder="密码" required>

                    <label for="inputClass" class="sr-only">身份：</label>
                    <input type="text" name="status" id="inputClass" class="form-control" value="老师" required style="display: none;">

                    <div class="checkbox">
                        <label>
                        <input type="checkbox" value="remember-me"> 记住我
                        </label>
                        <a href="{% url 'login:alter_pswd' %}">修改密码</a>
                        <a href="{% url 'login:register' %}">注册账号</a>
                        {% if message %}
                        <h5 style="color: red;">{{message}}</h5>
                        {% endif %}
                    </div>
                    <a href="{%url 'face:face_demand'%}"><button type="button" class="btn btn-primary btn-lg btn-block">人脸查询</button></a>
                    <button class="btn btn-lg btn-primary btn-block" type="submit">登陆</button>
                </form>
                </div>

                <!-- 教务登录 -->
                <div class="tab-pane" id="panel-666">
                    <form class="form-signin" action="{% url 'login:teacher_login' %}" method="post">
                        {% csrf_token %}
                    <i class="fa fa-user fa-lg"></i>
                    <label for="inputName" class="sr-only">账号：</label>
                    <input type="text" name="teacher_name" id="inputName" class="form-control" placeholder="教务工号" required autofocus>
                    <i class="fa fa-lock fa-lg"></i>
                    <label for="inputPassword" class="sr-only">密码：</label>
                    <input type="password" name="password" id="inputPassword" class="form-control" placeholder="密码" required>
                    
                    <label for="inputClass" class="sr-only">身份：</label>
                    <input type="text" name="status" id="inputClass" class="form-control" value="教务" required style="display: none;">

                    <div class="checkbox">
                        <label>
                        <input type="checkbox" value="remember-me"> 记住我
                        </label>
                        <a href="{% url 'login:alter_pswd' %}">修改密码</a>
                        <a href="{% url 'login:register' %}">注册账号</a>
                        {% if message %}
                        <h5 style="color: red;">{{message}}</h5>
                        {% endif %}
                    </div>
                    <button class="btn btn-lg btn-primary btn-block" type="submit">登陆</button>
                </form>
                </div>

            </div>
        </div>  
    
    </div>
        <div class="col-md-4">
        </div>
    </div>
        <footer class="footer">
        <p class="foot">&copy; 2018 北京网络职业学院考试系统Company, Inc.</p>
        </footer>
    </div> <!-- /container -->

    <!-- 引用的样式部分，不属于内容： -->
    <!-- jquery部分： -->
    <script type="text/javascript" src="{% static 'login/js/jquery-3.3.1.min.js' %}"></script>
    <!-- Bootstrap部分： -->
    <script type="text/javascript" src="{% static 'login/js/bootstrap.min.js' %}"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </body>
</html>
